<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        //nested data.
        var data = [
            {
                "name": "Africa",
                "data": [
                    {
                        "name": "Northern Africa",
                        "data":[
                            { "name": "Algeria", "literacy": 70},
                            { "name": "Egypt", "literacy": 57.7 },
                            { "name": "Libya", "literacy": 82.6},
                            { "name": "Morocco", "literacy": 51.7},
                            { "name": "Tunisia", "literacy": 74.2},
                            { "name": "Western Sahara"}
                        ]
                    },
                    {
                        "name": "Sub-Saharan Africa",
                        "data":[
                            {
                                "name": "Eastern Africa",
                                "data":[
                                    { "name": "Burundi", "literacy": 51.6},
                                    { "name": "Comoros", "literacy": 56.5 },
                                    {"name": "Djibouti", "literacy": 67.9},
                                    { "name": "Eritrea", "literacy": 58.6},
                                    { "name": "Ethiopia", "literacy": 42.7}
                                ]
                            },
                            {
                                "name": "Middle Africa",
                                "data":[
                                    { "name": "Angola", "literacy": 72.3},
                                    { "name": "Cameroon", "literacy": 56.9 },
                                    {"name": "Central African Republic", "literacy": 64},
                                    { "name": "Chad", "literacy": 76},
                                    { "name": "Congo", "literacy": 56}
                                ]
                            },
                            {
                                "name": "Southern Africa",
                                "data":[
                                    { "name": "Botswana", "literacy": 77},
                                    { "name": "Lesotho", "literacy": 65 },
                                    {"name": "Namibia", "literacy": 84},
                                    { "name": "South Africa", "literacy": 86.4},
                                    { "name": "Swaziland", "literacy": 81.6}
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "name": "Asia",
                "data": [
                    {
                        "name": "Central Asia",
                        "data":[
                            { "name": "Kazakhstan", "literacy": 98.4},
                            { "name": "Kyrgyzstan", "literacy": 97 },
                            {"name": "Tajikistan", "literacy": 99.4},
                            { "name": "Turkmenistan", "literacy": 98},
                            { "name": "Uzbekistan", "literacy": 99.3}
                        ]
                    },
                    {
                        "name": "Eastern Asia",
                        "data":[]
                    }
                ]
            }
        ];

        //initialize main grid
        $("#grid_md").pqGrid({                         
            width: 600,
            height: 'flex',
            freezeCols: 1,
            dataModel: { data: data },            
            scrollModel: {autoFit: true, flexContent: true},
            colModel: [
                { title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
                { title: 'Continent', dataIndx: 'name'}
            ],
            numberCell: { show: false },
            virtualX: true, showBottom: false,
            title: "<b>Continent & Countries</b>",
            resizable: true,            
            detailModel: {
                height: 90,
                init: function (ui) {                    
                    var rowData = ui.rowData,
                        model = subContinentModel( rowData.data ),
                        $grid = $("<div></div>").pqGrid(model);

                    return $grid;
                }
            }
        });
        
        var subContinentModel = function( data ){
            return {
                dataModel: { data: data },
                colModel: [
                    { title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
                    { title: 'Sub Continent', dataIndx: 'name'}
                ],
                height: 'flex',                
                numberCell: { show: false },
                freezeCols: 1,
                virtualX: true, showBottom: false,
                scrollModel: {autoFit: true},
                showTop: false,
                detailModel: {       
                    height: 90,             
                    init: function (ui) {                        
                        var rowData = ui.rowData,
                            rdata = rowData.data,
                            model = (rdata[0] && rdata[0].data)? subContinentModel(rdata): countryModel( rdata ),
                            $grid = $("<div></div>").pqGrid(model);

                        return $grid;
                    }
                }

            };
        };

        var countryModel = function( data ){
            return {
                dataModel: { data: data },
                colModel: [                    
                    { title: 'Country', dataIndx: 'name'},
                    { dataIndx: 'literacy', dataType: 'float', title: 'Literacy' }
                ],
                height: 'flex',                
                virtualX: true, showBottom: false,
                numberCell: { show: false },
                scrollModel: {autoFit: true},
                showTop: false
            };
        };
    });
        
</script>    
</head>
<body>

<div id="grid_md" style="margin:5px auto;"></div>

</body>

</html>
